<template>
	<view class="module">
		<uni-drawer ref="showRight" mode="right" :mask-click="true" :width="300">
			<view class="segmented-control">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"></uni-segmented-control>
			</view>
			<view class="picker">
				<scroll-view style="height: 100%" scroll-y="true">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" v-if="current === 0">
						<uni-forms-item label="上传图片" name="imageValue" required>
							<uni-file-picker
								v-model="formData.imageValue"
								fileMediatype="image"
								mode="grid"
								:sizeType="sizeType"
								ref="files"
								limit="1"
								:auto-upload="false"
								@select="select"
								@success="success"
								@fail="fail"
							/>
						</uni-forms-item>
						<uni-forms-item label="描述" name="type">
							<uni-easyinput v-model="formData.description" placeholder="请输入描述内容" type="textarea" trim="true" />
						</uni-forms-item>
						<uni-forms-item label="选择类型" name="type" required>
							<uni-data-select
								v-model="formData.type"
								:localdata="typeList"
								:disabled="formData.imageValue.length > 0 ? false : true"
								:placeholder="formData.imageValue.length > 0 ? '请选择类型' : '请先选择图片'"
							></uni-data-select>
						</uni-forms-item>
						<view class="miniBtn">
							<button class="btn" size="mini" type="default" :disabled="loading" @click="closeDrawer">取消</button>
							<button
								class="btnRight"
								size="mini"
								type="primary"
								:loading="loading"
								:disabled="formData.imageValue.length > 0 ? false : true"
								@click="submit('form')"
							>
								提交
							</button>
						</view>
					</uni-forms>
					<view class="add_type" v-if="current === 1">
						<uni-notice-bar background-color="rgb(243 242 240)" color="rgb(163 163 163)" text="注意: 多个类型之间使用 ',' 分开" />
						<uni-forms ref="typeForm" :modelValue="typeFormData" :rules="addRules" label-position="top">
							<uni-forms-item label="类型" name="addType" required>
								<uni-easyinput v-model="typeFormData.addType" placeholder="请输类型" type="textarea" trim="true" />
							</uni-forms-item>
							<view class="miniBtn">
								<button class="btn" size="mini" type="default" @click="closeDrawer">取消</button>
								<button class="btnRight" size="mini" type="primary" @click="addType('typeForm')">提交</button>
							</view>
						</uni-forms>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
export default {
	name: 'Module',
	props: {
		parentType: String ,// 类型：clothing || dishes
		typeList: []
	},
	data() {
		return {
			formData: {
				imageValue: [],
				type: '',
				description: ''
			},
			typeFormData: {
				addType: ''
			},
			rules: {
				imageValue: {
					rules: [
						{
							validateFunction: (rule, value, data, callback) => {
								if (value.length === 0) {
									callback('请选择图片');
								}
								return true;
							}
						}
					]
				},
				type: {
					rules: [
						{
							required: true,
							errorMessage: '请选择类型'
						}
					]
				}
			},
			addRules: {
				addType: {
					rules: [
						{
							required: true,
							errorMessage: '类型不能为空,请输入类型'
						}
					]
				}
			},
			// typeList: [
			// 	{
			// 		value: '测试',
			// 		text: '测试'
			// 	}
			// ],
			// 分段器数据
			current: 0,
			items: ['上传图片', '设置类型'],
			sizeType: ['compressed'],
			user_infor: {},
			loading: false,
		};
	},
	mounted() {
		// 获取登录人信息
		this.user_infor = uni.getStorageSync('token');
	},
	onReady() {
		// 需要在onReady中设置规则
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		// 上传图片
		submit(ref) {
			this.loading = true;
			setTimeout(() => {
				console.log('formData.imageValue', this.formData.imageValue);
				this.$refs['form']
					.validate()
					.then(res => {
						this.$refs.files.upload();
					})
					.catch(err => {
						this.loading = false;
					});
			}, 500);
		},
		// 分段器点击事件
		onClickItem(e) {
			this.current = e.currentIndex;
		},
		// 是否展示抽屉
		showDrawer() {
			this.$refs.showRight.open();
		},
		// 关闭抽屉
		closeDrawer() {
			this.$emit("getList")
			this.$refs.showRight.close();
			this.formData = {
				imageValue: [],
				type: '',
				description: ''
			};
			this.typeFormData = {
				addType: ''
			};
		},
		// 获取上传状态
		select(e) {
			this.formData.imageValue = e?.tempFiles;
		},

		// 上传成功
		success(e) {
			const params = e.tempFiles.map(item => {
				const { url, cloudPath, name, image } = item || {};
				return {
					type: this.formData.type, // 衣服类型
					imgUrl: url, // 图片的url
					description: this.formData?.description, // 图片描述
					userId: this.user_infor?.userId, // 登录人工号
					cloudPath: cloudPath,
					name: name,
					width: image?.width,
					height: image?.height
				};
			});

			if (this.parentType === 'clothing') {
				console.log('上传成功-服装', params);
			}
			// 	uniCloud
			// 		.callFunction({
			// 			name: 'DataList',
			// 			data: {
			// 				action: 'setDataList',
			// 				params: params || {}
			// 			}
			// 		})
			// 		.then((res) => {
			// 			uni.showToast({
			// 				title: '新增成功',
			// 				icon: 'success',
			// 				position: 'top'
			// 			});
			// 			this.formData = {
			// 				imageValue: [],
			// 				type: ''
			// 			};
			// 			this.loading = false;
			// 			setTimeout(()=>{
			// 				this.$emit("getList"); // 新增成功刷新列表
			// 			},500)
			// 		});
		},

		// 上传失败
		fail(e) {
			this.loading = false;
			uni.showToast({
				title: '上传失败',
				icon: 'error',
				position: 'top'
			});
		},

		// 新增类型
		addType(ref) {
			this.$refs[ref]
				.validate()
				.then(res => {
					uni.showLoading();
					if (res?.addType) {
						const newStr = res?.addType.replace(/[\uff0c]/g, ',').split(',');
						const newType = this.typeList.map((item) => item.value);
						const newData = Array.from(new Set([...newType, ...newStr]));
						const params = {
								totalType: this.parentType,
								typeList: newData
							};
						uniCloud
							.callFunction({
								name: 'add_typeList',
								data: {
									action: 'updateTypeList',
									params: {
										type:this.parentType,
										data:params
									}
								}
							})
							.then(res => {
								const { result } = res || {};
								uni.hideToast();
								uni.showToast({
									title: '添加成功',
									icon: 'success',
									position: 'top'
								});
								this.closeDrawer();
							});
					}
				})
				.catch(err => {
					//console.log('表单错误信息：', err);
				});
		}
	}
};
</script>

<style lang="less" scoped>
.module {
	.segmented-control {
		padding: 10rpx 5rpx 5rpx;
	}

	.picker {
		position: relative;
		height: 100%;
		padding: 15rpx;
		.miniBtn {
			display: flex;
			justify-content: end;
			.btn {
				margin: 0px;
			}
			.btnRight {
				margin: 0px;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
